<!-- 首页 -->
<template>
	<!-- <page-meta>
	  <navigation-bar
	    title="正好出行"
	    front-color="#ffffff"
	    background-color="#2979ff"
	    color-animation-timing-func="easeIn"
	  />
	</page-meta> -->
	<view class="home ">
		<!-- 首页 -->
		<view class="">
			<u-swiper
				:list="list3"
				previousMargin="30"
				nextMargin="30"
				height="200"
				circular
				:autoplay="true"
				radius="5"
				bgColor="#ffffff"
			></u-swiper>
		</view>
		<view class="home_menu">
			<view class="u-page__item__title">常用线路</view>
			<u-cell-group>
				<u-cell icon="car" title="通许往返郑州" isLink @click="goBuyTickets(1)"></u-cell>
				<u-cell icon="car" title="通许往返开封" isLink @click="goBuyTickets(2)"></u-cell>
				<u-cell icon="car" title="兰考往返郑州" isLink @click="goBuyTickets(3)"></u-cell>
				<u-cell icon="car" title="开封往返郑州" isLink @click="goBuyTickets(4)"></u-cell>
			</u-cell-group>
			<view class="flex service_tel">
				<view class="service_tel_title">客服电话：</view>
				<view class="service_tel_phone flex">
					<view class="" @click="callPhone('19837853388')">
						19837853388
					</view>
					<view class="" @click="callPhone('19837853366')">
						19837853366
					</view>
				</view>
				
			</view>
		</view>
		<!-- 模态框 -->
		<u-modal confirmColor="#17a2ff" @confirm="modalConfirm" @cancel="modalCancel" :title='showModelDemo.title'
			:confirmText="showModelDemo.confirmText" :show-cancel-button="showModelDemo.cancelButton"
			:show="showModelDemo.showModelMask" :content="showModelDemo.content"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模态框
				showModelDemo: {
					title: '提示',
					confirmText: "确定",
					orderId: "",
					content: "",
					type: 1, //1退票2取消订单
					cancelButton: false,
					showModelMask: false,
				},
				list3: ['https://hnyoz-identity.oss-cn-shanghai.aliyuncs.com/2023/12/11/151606150e434f258ce8767c7557c9desw1.jpg',
				'https://hnyoz-identity.oss-cn-shanghai.aliyuncs.com/2023/12/11/220615357b7b4557be719207a2308bcesw2.jpg',
				'https://hnyoz-identity.oss-cn-shanghai.aliyuncs.com/2023/12/11/37904b2b76a940dcab5edb20f83eee94sw3.jpg'
				],
			};
		},
		onLoad() {
		},
		onShow() {

		},
		methods: {
			// 拨打电话
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 去正好出行小程序
			goBuyTickets(type) {
				// 模态框
				this.showModelDemo = {
					title: '友情提示',
					confirmText: "去购票",
					orderId: "",
					content: "本小程序已经停用，请前往新版小程序进行购票",
					type: type,
					cancelButton: true,
					showModelMask: true,
				};
			},
			modalCancel() {
				this.showModelDemo.showModelMask = false;
			},
			// 模态框确定事件
			modalConfirm() {
				var _this = this
				var path = '';
				if (_this.showModelDemo.type == 1) {
					var form = {
						"startCityId": 241594,
						"startCityName": "通许县",
						"endCityId": 237643,
						"endCityName": "郑州市区"
					}
				} else if (_this.showModelDemo.type == 2) {
					var form = {
						"startCityId": 241594,
						"startCityName": "通许县",
						"endCityId": 240650,
						"endCityName": "开封市区"
					}
				} else if (_this.showModelDemo.type == 3) {
					var form = {
						"startCityId": 242816,
						"startCityName": "兰考县",
						"endCityId": 237643,
						"endCityName": "郑州市区"
					}
				} else if (_this.showModelDemo.type == 4) {
					var form = {
						"startCityName": "开封市区",
						"startCityId": 240650,
						"endCityName": "郑州市区",
						"endCityId": 237643
					}
				}
				path = 'pages/home/home?form=' + JSON.stringify(form)
				uni.navigateToMiniProgram({
					appId: 'wx20e5bc80dac59c11',
					path: path,
					// extraData: {
					//   foo: 'bar'
					// },
					envVersion: 'release',
					// release正式trial体验develop开发
					success() {
						// 打开成功
						_this.modalCancel()
					},
					fail() {
						_this.modalCancel()
					},
				})

			},
		}
	};
</script>

<style scoped lang="scss">
	.home {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;

		.home_menu {
			background-color: #FFFFFF;
			color: #909193;

			.u-page__item__title {
				background-color: #f8f8f8;
				padding: 30rpx;
				font-size: 30rpx;
			}
			.service_tel{
				
				.service_tel_title{
					padding: 30rpx 10rpx 30rpx 30rpx;
					font-size: 30rpx;
					width: 150rpx;
				}
				.service_tel_phone{
					padding: 32rpx 0;
					
					font-size: 28rpx;
					color: #17a2ff;
					view{
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
<style>
	.home .u-cell__body{
		padding: 15px 15px !important;
	}
	.home .u-cell__left-icon-wrap .u-icon__icon {
		color: #5ac725 !important;
	}
</style>